<template>
    <div id="the-ranking" :class="{makePadding:showDownloadHead}">
        <download-head v-if="showDownloadHead" :callback="closeHead" class="download-header"></download-head>
        <div class="banner_container">
            <img class="banner" src="./img/ranking_banner.png" />
        </div>
        <div class="ranking-container">
            <div class="title-container">
                <img class="img-list-title" src="./img/point_top_title.png" />
            </div>
            <div class="list-container">
                <div class="list-header">
                    <div class="header-index">排名</div>
                    <div class="header-name">昵称</div>
                    <div class="header-content">累计消耗积分</div>
                </div>
                <ul>
                    <template v-for="(item,index) in point_most_array">
                        <li class="list-item" v-bind:key="index">
                            <div class="index">{{index + 1}}</div>
                            <div class="name">{{item.name}}</div>
                            <div class="content">{{item.point_sum}}分</div>
                        </li>
                    </template>
                </ul>
            </div>

            <div class="title-container">
                <img class="img-list-title" src="./img/order_top_title.png" />
            </div>
            <div class="list-container">
                <div class="list-header">
                    <div class="header-index">排名</div>
                    <div class="header-name">昵称</div>
                    <div class="header-content">累计参与场次</div>
                </div>
                <ul>
                    <template v-for="(item,index) in order_most_array">
                        <li class="list-item" v-bind:key="index">
                            <div class="index">{{index + 1}}</div>
                            <div class="name">{{item.name}}</div>
                            <div class="content">{{item.order_sum}}次</div>
                        </li>
                    </template>
                </ul>
            </div>
            <p class="tip">榜单数据实时更新，快去参加，让大家看到你吧</p>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import downloadHead from '../../components/downloadhead/DownloadHead.vue'
// 下拉刷新统一使用压缩版的js
import refreashData from '../../../static/js/dropload/dropload.min.js'

const ERR_OK = '0';

export default {
    data() {
        return {
            point_most_array: [],
            order_most_array: [],
            showDownloadHead: false,
            shareTitle: '',
            shareContent: '',
            shareImgUrl: ''
        }
    },
    created() {
        // 是否显示顶部下载条
        if (!this.wccconfig.isApp) {
            this.showDownloadHead = true
        }
        // 下载数据
        this.loadData()
        // 下拉刷新
        var vm = this
        $(function() {
            $('#the-ranking').dropload({
                scrollArea: window,
                loadUpFn: function(me) {
                    vm.loadData(function() {
                        me.resetload()
                    })
                }
            })
        })
    },
    methods: {
        loadData(callback) {
            let vm = this;
            // 构造真实请求Url，/api/ranking为mock数据
            // let mockUrl = "/api/ranking"
            let reqUrl = this.wccconfig.buildUrl('/Jfproduct/top')
            this.$http.get(reqUrl)
                .then(function(response) {
                    var res = response.body
                    if (res.errno === ERR_OK) {
                        vm.point_most_array = res.data.point_top
                        vm.order_most_array = res.data.order_top
                        vm.shareTitle = res.share_title
                        vm.shareContent = res.share_content
                        vm.shareImgUrl = res.share_imgurl
                        // 右上角分享
                        // 下面判断条件需要在URL中配置版本参数v
                        if (vm.utils.supportShare()) {
                            let shareUrl = location.href
                            vm.wccia.share(vm.shareTitle, vm.shareContent, shareUrl, vm.shareImgUrl, true)
                        }
                    } else {
                        // 暂不处理接口错误返回
                        // errno=1 无人参与，暂不做处理
                    }
                    // 无论返回errno是多少，都要执行下拉刷新回调处理
                    if (callback && callback instanceof Function) {
                        callback()
                    }
                })
                .catch(function(code) {
                    // 暂不处理异常
                });
        },
        closeHead() {
            this.showDownloadHead = false
        }
    },
    components: {
        downloadHead
    }
}

</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
@import '../../../static/js/dropload/dropload.css'

.makePadding
  padding-top .95rem
.banner_container
  background-color #F0F0F0
  .banner
    width 100%
.ranking-container
  background-color #F0F0F0
  padding .2rem
  .tip
    color #148AF7
    font-size .3rem
    text-align center
    margin-top .5rem
    margin-bottom .4rem
  .title-container
    width 100%
    height 100%
    text-align center
    margin-bottom -.65rem
    .img-list-title
      width 60%
  .list-container
    background-color #FFFFFF
    border-radius: .1rem;
    padding-top .8rem
    padding-bottom .25rem
    margin-bottom .25rem
    .list-header
      margin-top .1rem
      margin-left .1rem
      margin-right .1rem
      margin-bottom .35rem
      display flex
      text-align center
      font-size .32rem
      color #464646
      .header-index
        display block
        flex 1
        width 0
      .header-name
        display block
        flex 2
        width 0
      .header-content
        display block
        flex 2
        width 0
    .list-item
      margin-top .25rem
      margin-bottom .25rem
      margin-left .1rem
      margin-right .1rem
      display flex
      text-align center
      font-size .28rem
      color #808080
      .index
        display block
        flex 1
        width 0
      .name
        display block
        flex 2
        width 0
      .content
        display block
        flex 2
        width 0
</style>
